<template>
    <div>
        <blockIndexNavBar title="工资详情"></blockIndexNavBar>
        <div class="container-form">
            <table>


                <tr>
                    <th colspan="4" style="background: #3a8ee6">汇总合计</th>
                </tr>
                <template v-for='(todo,index) in countArr' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<countArr.length'>
                            {{countArr[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<countArr.length'>
                            {{countArr[index+1].value}}
                        </td>
                    </tr>
                </template>

                <tr>
                    <th colspan="4" style="background: #3a8ee6">基本工资</th>
                </tr>
                <template v-for='(todo,index) in salaryMonthList' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<salaryMonthList.length'>
                            {{salaryMonthList[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<salaryMonthList.length'>
                            {{salaryMonthList[index+1].value}}
                        </td>
                    </tr>
                </template>
                <tr>
                    <th colspan="4" style="background: #3a8ee6" v-if="deductionList.length > 0">代扣项目</th>
                </tr>
                <template v-for='(todo,index) in deductionList' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<deductionList.length'>
                            {{deductionList[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<deductionList.length'>
                            {{deductionList[index+1].value}}
                        </td>
                    </tr>
                </template>


                <tr>
                    <th colspan="4" style="background: #3a8ee6" v-if="salaryPerformance.length > 0">员工绩效</th>
                </tr>
                <template v-for='(todo,index) in salaryPerformance' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<salaryPerformance.length'>
                            {{salaryPerformance[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<salaryPerformance.length'>
                            {{salaryPerformance[index+1].value}}
                        </td>
                    </tr>
                </template>


                <tr>
                    <th colspan="4" style="background: #3a8ee6" v-if="otherMiscellaneousArr.length > 0">其他杂项</th>
                </tr>
                <template v-for='(todo,index) in otherMiscellaneousArr' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<otherMiscellaneousArr.length'>
                            {{otherMiscellaneousArr[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<otherMiscellaneousArr.length'>
                            {{otherMiscellaneousArr[index+1].value}}
                        </td>
                    </tr>
                </template>


                <tr>
                    <th colspan="4" style="background: #3a8ee6" v-if="DeferredPaymentBean.length > 0">延付明细</th>
                </tr>
                <template v-for='(todo,index) in DeferredPaymentBean' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<DeferredPaymentBean.length'>
                            {{DeferredPaymentBean[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<DeferredPaymentBean.length'>
                            {{DeferredPaymentBean[index+1].value}}
                        </td>
                    </tr>
                </template>


                <tr>
                    <th colspan="4" style="background: #3a8ee6" v-if="redemptionDetails.length > 0">兑付明细</th>
                </tr>


                <template v-for='(redemption,index) in redemptionDetails'>
                    <template v-for='(todo,todoIndex) in redemption' v-if='todoIndex%2==0'>
                        <tr>
                            <td>
                                {{todo.fileName}}:
                            </td>
                            <td>
                                {{todo.value}}
                            </td>
                            <td v-if="todoIndex+1 == 9" style="background: white"></td>
                            <td v-if="todoIndex+1 == 9"></td>
                            <td v-if='todoIndex+1<redemption.length'>
                                {{redemption[todoIndex+1].fileName}}:
                            </td>
                            <td v-if='todoIndex+1<redemption.length'>
                                {{redemption[todoIndex+1].value}}
                            </td>
                        </tr>
                    </template>
                </template>
                <tr>
                    <th colspan="4" style="background: #3a8ee6" v-if="payBack.length > 0">赔付明细</th>
                </tr>
                <template v-for='(todo,index) in payBack' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<payBack.length'>
                            {{payBack[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<payBack.length'>
                            {{payBack[index+1].value}}
                        </td>
                    </tr>
                </template>


                <tr>
                    <th colspan="4" style="background: #3a8ee6" v-if="deferredAccount.length > 0">延付台账</th>
                </tr>
                <template v-for='(todo,index) in deferredAccount' v-if='index%2==0'>
                    <tr>
                        <td>
                            {{todo.fileName}}:
                        </td>
                        <td>
                            {{todo.value}}
                        </td>
                        <td v-if='index+1<deferredAccount.length'>
                            {{deferredAccount[index+1].fileName}}:
                        </td>
                        <td v-if='index+1<deferredAccount.length'>
                            {{deferredAccount[index+1].value}}
                        </td>
                    </tr>
                </template>
            </table>

        </div>
    </div>
</template>

<script>
    import blockIndexNavBar from "@/components/blockIndexNavBar";

    export default {
        name: "salaryInfo",
        data() {
            return {
                salaryMonthList: [],
                deferredAccount: [],
                payBack: [],
                countArr: [],
                otherMiscellaneousArr: [],
                salaryPerformance: [],
                DeferredPaymentBean: [],
                redemptionDetails: [],
                deductionList: [],
            }
        },
        components: {
            blockIndexNavBar
        },
        mounted() {
            console.log(this.$route.query)
            this.salaryMonthList = this.$route.query.salaryMonthList || []
            this.deferredAccount = this.$route.query.deferredAccount || []
            this.payBack = this.$route.query.payBack || []
            this.countArr = this.$route.query.countArr || []
            this.otherMiscellaneousArr = this.$route.query.otherMiscellaneousArr || []
            this.salaryPerformance = this.$route.query.salaryPerformance || []
            this.DeferredPaymentBean = this.$route.query.DeferredPaymentBean || []
            this.redemptionDetails = this.$route.query.redemptionDetails || []
            this.deductionList = this.$route.query.deductionList || []
        },
    }
</script>

<style scoped lang="less">

    td:nth-child(odd) {
        background: #4A89DC;
        font-weight: bold;
    }

    .table_box {
        width: 60%;
        height: 500px;
        margin: 0 auto;
    }

    table {
        border: 1px solid black;
        border-radius: 10px;
        box-shadow: 2px 2px 2px #ccc;
        border-spacing: 0;
        width: 100%;
        line-height: 25px;
    }

    table tr {
        text-align: center;
    }

    table td,
    table th {
        border-right: 1px solid black !important;
        /*<!--设置表格单元格外边框，只设置右下边框-->*/
        border-bottom: 1px solid black;
        padding: 10px;
        /*<!--设置单元格内边距，单元格内容显得不拥挤-->*/
        text-align: center;
        width: 25%;
    }

    tr:last-child td:first-child {
        border-radius: 0 0 0 10px;
    }

    tr:last-child td:last-child {
        border-radius: 0 0 10px 0;
    }

    tr:last-child td {
        border-bottom: none;
    }

    tr td:last-child, tr th:last-child {
        border-right: none;
    }

    /*tr:nth-child(even) {*/
    /*    background: lightcoral;*/

    /*}*/


    table tr:first-child th:last-child {
        border-top-right-radius: 9px;
        border-top-left-radius: 9px;
    }

    table tr:last-child td:first-child {
        border-bottom-left-radius: 9px;
    }

    table tr:last-child td:last-child {
        border-bottom-right-radius: 0px;
    }
</style>
